$(function(){
  //get elem
  let $url = $('input[type = "text"]'),
      $btnSave = $('input[type="button"]'),
      $img = $('img'),
      $tmpImg = $('<img>');
  
  //load local storage image
  loadImage();//自定义函数  

  $btnSave.click(()=>{
  //load tmp image
  $tmpImg.attr('crossOrigin', 'anonymous')//跨域处理
  // validate url: not empty, pattern
  $tmpImg.attr('src', $url.val());

  })

  $tmpImg.load(function(){
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');
    ctx.width = $tmpImg.width;
    ctx.height = $tmpImg.height;
    //fill tmp image canvas
    ctx.drawImage(this, 0, 0,can.height);
    

    //canvas output base64
    //save base64 local storage
    window.localStorage.setItem('img', can.toDataURL())
    loadImage();
  })


  function loadImage(){
  let strImg = window.localStorage.getItem('img');
  if(strImg) {
    $img.attr('src',strImg);
    $img.css({display:'block'})
  }else{
    $img.css({display:'none'})
  }
}

});

